<template>
    <section style="padding: 10px 5px 5px 10px;overflow-y: auto;" :style="{height: tableHeight+'px'}">
        <div style="position: absolute; top: 20px; right: 20px;z-index: 10">
            <el-button size="small" class="el-icon-close" plain @click="closeBtn">
                退出
            </el-button>
            <el-button size="small" type="warning" class="el-icon-printer" v-print="'#printCheck'" plain>
                打印
            </el-button>
        </div>
        <el-col :span="24" id="printCheck">
            <el-row style="height: 60px;">
                <el-col :span="8" style="padding-left: 40px">
                    <el-image :src="logossy2" fit="contain" style="height: 60px;"></el-image>
                </el-col>
                <el-col :span="8" style="text-align: center">
                    <div style="margin-top: 15px;font-size: 24px;color: black;">产品确认表</div>
                </el-col>
                <el-col :span="8">
                    <div style="margin-left: 45%;margin-top: 45px;font-style: italic;">
                        打印时间{{formatDate(new Date().getTime())}}
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <table border style="width: 100%;color: black;font-size: 20px;text-align: center">
                    <tr style="color: black;">
                        <td style="width: 150px;font-weight: bold">品名</td>
                        <td style="width: 400px;">{{printData.style.name}}</td>
                        <td colspan="2" style="font-weight: bold">设计图</td>
                    </tr>
                    <tr style="color: black;">
                        <td style="width: 150px;font-weight: bold">款号</td>
                        <td style="width: 400px;">{{printData.style.number}}</td>
                        <td rowspan="6" colspan="2">
                            <el-image :src="printData.style.img.images" fit="contain" style="height: 300px;"></el-image>
                        </td>
                    </tr>
                    <tr style="color: black;">
                        <td style="width: 150px;font-weight: bold">套装编号</td>
                        <td style="width: 400px;">{{printData.style.package_number}}</td>
                    </tr>
                    <tr style="color: black;">
                        <td style="width: 150px;font-weight: bold">颜色</td>
                        <td style="width: 400px;">
                            <span v-for="(item,index) in printData.style_colour" :key="index">
                                {{item.colour}}<span v-if="index != printData.style_colour.length-1">，</span>
                            </span>
                        </td>
                    </tr>
                    <tr style="color: black;">
                        <td style="width: 150px;font-weight: bold">上新月</td>
                        <td style="width: 400px;">{{printData.style.year}} / {{printData.style.month}}</td>
                    </tr>
                    <tr style="color: black;">
                        <td style="width: 150px;font-weight: bold">季节</td>
                        <td style="width: 400px;">{{printData.style.season}}</td>
                    </tr>
                    <tr style="color: black;">
                        <td style="width: 150px;font-weight: bold">目标人群</td>
                        <td style="width: 400px;">{{printData.style.target}}</td>
                    </tr>
                    <tr style="color: black;">
                        <td style="width: 150px;font-weight: bold">版师</td>
                        <td style="width: 400px;">{{printData.style.paper_designer}}</td>
                        <td style="width: 150px;font-weight: bold">绣花版师</td>
                        <td>{{printData.style.embroider_designer}}</td>
                    </tr>
                    <tr style="color: black;">
                        <td style="width: 150px;font-weight: bold">图稿设计师</td>
                        <td style="width: 400px;">{{printData.style.f3}}</td>
                        <td style="width: 150px;font-weight: bold">产品负责人</td>
                        <td>{{printData.style.designer}}</td>
                    </tr>
                    <tr style="color: black;">
                        <td style="width: 150px;font-weight: bold">文化属性</td>
                        <td style="width: 400px;">{{printData.style.t1}}</td>
                        <td style="width: 150px;font-weight: bold">拍照样码数</td>
                        <td></td>
                    </tr>
                    <tr style="color: black;">
                        <td style="width: 150px;font-weight: bold">设计分类</td>
                        <td style="width: 400px;">{{printData.style.detail_category}}</td>
                        <td style="width: 150px;font-weight: bold">当前版数</td>
                        <td></td>
                    </tr>
                </table>
                <table border style="width: 100%;color: black;font-size: 20px;text-align: center">
                    <tr style="color: black;">
                        <td rowspan="6" style="width: 60px;font-weight: bold">产品信息</td>
                        <td style="width: 180px;height:60px;font-weight: bold">下单尺码：</td>
                        <td style="text-align: left">
                            <span v-for="(item,index) in printData.size_list" :key="index">
                                {{item.size_code.title}}&nbsp;&nbsp;
                            </span>
                        </td>
                    </tr>
                    <tr style="color: black;">
                        <td style="width: 180px;height:120px;font-weight: bold">版型：</td>
                        <td></td>
                    </tr>
                    <tr style="color: black;">
                        <td style="width: 180px;height:120px;font-weight: bold">颜色：</td>
                        <td></td>
                    </tr>
                    <tr style="color: black;">
                        <td style="width: 180px;height:120px;font-weight: bold">面料：</td>
                        <td></td>
                    </tr>
                    <tr style="color: black;">
                        <td style="width: 180px;height:120px;font-weight: bold">绣花：</td>
                        <td></td>
                    </tr>
                    <tr style="color: black;">
                        <td style="width: 180px;height:120px;font-weight: bold">其他工艺：</td>
                        <td></td>
                    </tr>
                </table>
                <table border style="width: 100%;color: black;font-size: 20px;text-align: center">
                    <tr style="color: black;height:60px;text-align: left;font-weight: bold">
                        <td style="width: 500px;">样衣用时：</td>
                        <td colspan="4">产品负责人签字：</td>
                    </tr>
                    <tr style="color: black;height:60px;text-align: left;font-weight: bold">
                        <td style="width: 500px;">绣花负责人签字：</td>
                        <td colspan="4">版师负责人签字：</td>
                    </tr>
                    <tr style="color: black;height:60px;text-align: center;font-weight: bold">
                        <td style="text-align: left">设计与生产交接确认签字：</td>
                        <td style="width: 13%">过款</td>
                        <td style="width: 13%">取消</td>
                        <td style="width: 13%">三版</td>
                        <td style="width: 13%">重定上新月份</td>
                    </tr>
                    <tr style="color: black;height:60px;text-align: center;font-weight: bold">
                        <td style="text-align: left">设计总监：</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                </table>
            </el-row>
        </el-col>
    </section>
</template>

<script>
import logossy2 from "@/assets/images/logossy2.png";
import {formatDate} from "../../../libs/tools";

export default {
    name: "printCheck",
    props: {
        printData:{
            type: Object,
            default: {}
        },
    },
    data() {
        return {
            logossy2,
            tableHeight: window.innerHeight,
            selectIndex: 0,
            btnLoading: false,
            loading: false,
            page: 1,
            limit: 20,
            total: 0,
            data: [],
            user: {},
            nodeActions: [],
            formatDate,
        }
    },
    created() {
        this.user = this.$store.getters.user;
        this.nodeActions = this.user.node_actions[this.$route.meta.id] ? this.user.node_actions[this.$route.meta.id] : [];
    },
    methods: {
        closeBtn(){
            this.$emit("close-btn");
        },
    },
    mounted() {

    }
}
</script>

<style scoped>
@page {
    size: auto;
    margin: 0mm;
}
#printCheck{
    width: 1100px;
    margin-top: 30px;
    margin-left: 40px;
}

#printCheck table, th, td {
    border: 1px solid #303133;
    border-collapse: collapse; /* 移除单元格之间的间隔 */
    padding: 10px;
}
</style>
